<template>
  <div class="container mx-auto py-8">
    <div class="flex gap-8">
      <!-- 左侧品牌列表 -->
      <div class="w-1/4 bg-white rounded-lg shadow-md p-4">
        <h2 class="text-xl font-bold mb-4">Brand List</h2>
        <ul class="space-y-2">
          <li 
            v-for="brand in brands" 
            :key="brand.id"
            @mouseenter="currentBrand = brand"
            class="px-4 py-2 rounded-md cursor-pointer transition-colors"
            :class="{
              'bg-primary text-white': currentBrand?.id === brand.id,
              'hover:bg-gray-100': currentBrand?.id !== brand.id
            }"
          >
            {{ brand.name }}
          </li>
        </ul>
      </div>

      <!-- 右侧型号列表 -->
      <div class="w-3/4 bg-white rounded-lg shadow-md p-4">
        <h2 class="text-xl font-bold mb-4">
          {{ currentBrand ? `${currentBrand.name} Product Model` : 'Please select brand' }}
        </h2>
        
        <div v-if="currentBrand" class="grid grid-cols-2 ">
          <div 
            v-for="model in currentPageModels" 
            :key="model.id"
            class="p-4 rounded-lg hover:shadow-md transition-shadow cursor-pointer"
            @click="handleSelectModel(model.id)"
          >
            <h3 class="text-lg ">{{ model.name }}</h3>
          </div>
        </div>
         <!-- 分页器 -->
        <div class="flex justify-center" v-if="totalPages > 1 && currentBrand">
          <el-pagination
            v-model:current-page="currentPage"
            :page-size="pageSize"
            :total="currentBrand.models.length"
            layout="prev, pager, next"
            @current-change="handlePageChange"
          />
        </div>
        <div 
          v-else 
          class="flex items-center justify-center h-64 text-gray-500"
        >
          Please select the brand on the left to view the product model
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { defineComponent, ref, computed } from 'vue'
import { useRouter } from 'vue-router'
import brands from './data/brand.ts'

interface Model {
  id: number
  name: string
}

interface Brand {
  id: number
  name: string
  models: Model[]
}
// 分页相关
const currentPage = ref(1)
const pageSize = ref(20)
const router = useRouter()

const currentBrand = ref<Brand | null>(null)

const handleSelectModel = (id: number) => {
  console.log('选择了型号:', id);
  
  router.push(`/detail`)
}

// 计算当前页的数据
const currentPageModels = computed(() => {
  if (!currentBrand.value) return []
  const start = (currentPage.value - 1) * pageSize.value
  const end = start + pageSize.value
  return currentBrand.value.models.slice(start, end)
})
// 计算总页数
const totalPages = computed(() => {
  if (!currentBrand.value) return 0
  return Math.ceil(currentBrand.value.models.length / pageSize.value)
})

// 切换品牌时重置页码
const handleBrandChange = (brand: Brand) => {
  currentBrand.value = brand
  currentPage.value = 1
}

// 页码改变处理
const handlePageChange = (page: number) => {
  currentPage.value = page
}
</script>

<style scoped>

</style>